<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/root.css"/>
    <link rel="stylesheet" type="text/css" href="css/pay/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/order/order.css"/>
    <style>
        .get-code-btn {
            position: absolute;
            right: 0.6rem;
            top: 0.6rem;
            height: 2rem;
            font-size: 1.2rem;
            line-height: 2rem;
            padding: 0 1rem;
            background: #39cccc;
            color: #fff;
            border-radius: .2rem;
        }

        .i-down {
            display: inline-block;
            transform: rotate(-90deg);
            -ms-transform: rotate(-90deg); /* IE 9 */
            -moz-transform: rotate(-90deg); /* Firefox */
            -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
            -o-transform: rotate(-90deg); /* Opera */
        }

        .i-up {
            display: inline-block;
            transform: rotate(90deg);
            -ms-transform: rotate(90deg); /* IE 9 */
            -moz-transform: rotate(90deg); /* Firefox */
            -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
            -o-transform: rotate(90deg); /* Opera */
        }

        .addres-list {
            display: none;
            background-color: #ffffff;, padding-bottom: 2 px;
        }

        .addres-list ul {
        }

        .addres-list ul li {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            background-color: #ffffff;
            border-right: .1rem #4F5155 dotted;
            list-style: none;
            width: 50%;
            float: left;
            padding-left: 1rem;
            vertical-align: middle;
            height: 2.6rem;
            line-height: 2.6rem;
            border-bottom: .1rem #4F5155 dotted;
        }

        .addres-list ul li .romtitle {
            padding-left: 2rem;
            background-image: url("/img/chk.png");
            background-repeat: no-repeat;
            background-size: 1.5rem 1.5rem;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js?ver=2.0.4" charset="utf-8"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script src="js/base/api.js"></script>
    <script src="js/base/base.js"></script>
    <script src="js/base/vue-filter.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="cordova.js"></script>

    <script type="text/javascript" src="js/magiclamp.js?ver=2.0.3" charset="utf-8"></script>


    <script type="text/javascript" src="js/main_paytype.js?ver=2.0.4" charset="utf-8"></script>

</head>
<body>
<div id="payhtml">
    <header>
        <a @click="page_back" v-if="baseConfig.is_phone" class="h-left back-btn">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <h1 class="h-title">支付 </h1>
    </header>

    <form method="post" id="gotopay_form">
        <div id="root" class="h-t-bar">
            <div class="pay-gs-list g-wrap">
                <div v-for="orderinfo in order_list">
                    <div class="my-order-title padding-def">
                        <div>
                            <img class="header-img" :src="orderinfo.order.host__icon_url+'&imageView2/1/w/40/h/40'">
                            <span>{{orderinfo.order.host__realname}}</span>
                        </div>
                    </div>
                    <div class="border-top" v-for="goodsitem in orderinfo.order_info">
                        <div class="g-item">
                            <div class="g-item-wrap">
                                <span class="g-img">
                                    <img :src="baseConfig.qn_host+goodsitem.goods__small_image__fileurl+'?imageView2/1/w/70/h/70'">
                                </span>
                                <div class="g-i-info">
                                    <p class="g-i-name order-goods-title">{{goodsitem.goods__name}}</p>
                                    <p class="order-goods-mark margin-bottom" v-if="goodsitem.goods__gg">{{goodsitem.goods__gg}}</p>
                                    <p class="order-count">
                                        <span class="order-goods-price" v-text="price_filter(goodsitem.price)"></span>
                                        <span class="order-goods-num">数量:{{goodsitem.num}}</span>
                                    </p>
                                </div>
                            </div>

                        </div>
                        <div class="text-container border-top line">
                           <div class="left">买家备注：</div>
                            <textarea class="textarea" placeholder="选填" v-model="goodsitem.bz"></textarea>
                        </div>
                    </div>
                    <div class="text-container line">
                        <div class="left">商品总价:</div>
                        <div class="right red-font" v-text="price_filter(orderinfo.order.price)"></div>
                    </div>
                    <div class="text-container">
                        <div class="left">运费:</div>
                        <div class="right red-font" v-text="price_filter(orderinfo.order.express_fee)"></div>
                    </div>
                </div>
            </div>
            <div class="text-container line">
                <div class="left">共需支付:</div>
                <div class="right" v-text="price_filter(pay_order_info.price)"></div>
            </div>
            <div @click="choice_address(pay_order_info.id, pay_order_info.address_id)">
                <div class="text-container line">
                    <div class="left">联系人:</div>
                    <div class="right">
                        <div class=" span_black" v-if="pay_order_info.address">
                            {{pay_order_info.receiver_name}}:{{pay_order_info.receiver_phone}}
                        </div>
                        <span v-if="!pay_order_info.address" class="span_red">请选择邮寄地址</span>
                    </div>
                    <i class="iconfont icon-arrow1" v-if="pay_order_info.charge_status!=2"></i>
                </div>
                <div class="text-container"  v-if="pay_order_info.address">
                    <div class="left">邮寄地址:</div>
                    <div class="right ell">{{pay_order_info.address}}</div>
                    <i class="iconfont icon-arrow1" v-if="pay_order_info.charge_status!=2"></i>
                </div>
            </div>
            <br>
            <div class="pay-list" v-if="pay_order_info.charge_status==0">
                <!--        是否选择支付宝或者微信-->
                <div class="thd-party-pay">
                    <div class="pay-item wepay">
                        <div class="pay-info">
                    <span class="pay-icon-bg wepay">
                        <i class="iconfont icon-weixinzhifu"></i>
                    </span>
                            微信支付
                        </div>
                        <div class="chk-wrap">
                            <!--微信支付-->
                            <input type="radio" class="paycheckbox" name="pay" v-model="channel" value="wx">
                        </div>
                    </div>
                    <div class="pay-item alipay">
                        <div class="pay-info">
                    <span class="pay-icon-bg alipay">
                    <i class="iconfont icon-zhifubao"></i>
                    </span>
                            支付宝支付
                        </div>
                        <div class="chk-wrap">
                            <!--支付宝支付-->
                            <input type="radio" class="paycheckbox" name="pay" v-model="channel" value="alipay">
                        </div>
                    </div>
                </div>
            </div>
            <!--action-bar-->


            <div class="action-bar pay-action" v-if="pay_order_info.is_active">
                <div class="ac-mid" v-if="pay_order_info.charge_status==2" @click="close_page">
                    支付成功, 继续购物
                </div>
                <span class="ac-mid" v-if="pay_order_info.charge_status!=2">
                    <span class="cart-sum">
                        <span class="wepay" v-if="pay_order_info.channel=='wx_pub'||(pay_order_info.channel==''&&channel=='wx_pub')">需微信公众号支付</span>
                        <span class="wepay" v-if="pay_order_info.channel=='wx'||(pay_order_info.channel==''&&channel=='wx')">需微信支付</span>
                        <span class="alipay" v-if="pay_order_info.channel=='alipay'||(pay_order_info.channel==''&&channel=='alipay')">需支付宝付</span>
                        ：
                        <span class="price" v-text="price_filter(pay_order_info.price)"></span>
                    </span>
                    <!--<span class="pay-against">-->
                    <!--赠款或余额已抵付<span>￥</span><span class="price" id="pass_price">0.00</span>-->
                    <!--</span>-->
                </span>
                <a class="ac-right" @click="ping_pay" v-if="pay_order_info.charge_status==0">去支付</a>
                <a class="ac-right" @click="re_ping_pay" v-if="pay_order_info.charge_status==1">继续支付</a>
                <a class="ac-right" @click="re_ping_pay" v-if="pay_order_info.charge_status==3">重新支付</a>
            </div>

            <div class="action-bar pay-action" v-if="!pay_order_info.is_active">
                <div class="ac-mid" @click="close_page">
                    订单已经被删除,不能支付
                </div>

            </div>
        </div>
    </form>
</div>
</body>

</html>